<template>
	<view class="content">
		<uni-nav-bar color="black" :fixed="true" leftWidth="0" :background-color="navColor" status-bar :border="false">

			<view class="nav">
				<view class="input-view">
					<input  class="nav-bar-input" v-model="searchstr" type="text" placeholder="查找活动"
						@confirm="search" />

				</view>
				<image src="../../static/icon/search.png" mode="aspectFit" @tap="search"></image>
				<view class="right" @tap="gohistory">历史</view>
			</view>
		</uni-nav-bar>

		<view class="head" >
			<view class="segment">
				<view :class="['left', { active: current == 0 }]" @tap="()=>current=0">
					<view class="top">进行中 </view>
				</view>
				<view class="divide"></view>
				<view :class="['right', { active: current == 1 }]" @tap="()=>current=1">
					<view class="top">待提报</view>
				</view>
			</view>
		</view>

		<scroll-view class="body" @scrolltolower="refresh_all()"  :scroll-y="true">
			<view v-if="current == 0&&showtab" class="b_1">
				
			</view>
			<view class="b_2">
			
				
			</view>
		</scroll-view>
		<my-register :show="showZhuce" @ok="okZhuce" @cancel="showZhuce=false">
		</my-register>
		<my-login :show="showLogin" @ok="okLogin" @cancel="showLogin=false">
			<view style="text-align: center;">
				<text>登录过期，请再次授权登录</text>
			</view>
		</my-login>
		<my-okmodal :show="showEmpower" btn="同意授权" @ok="questEmpower" @cancel="showEmpower=false">
			<view><text>请您同意授权，系统发送，分解成功、任务完成提醒。</text></view>
		</my-okmodal>
	</view>
</template>

<script>
	import helper from "../../utils/helper";
	import { agingApi as agingApi } from "../../utils/api";
	export default {
		data() {
			return {
				ready: false,
				showEmpower: false,
				showZhuce: false,
				showLogin: false,
				searchstr: '',
				navColor: 'transparent',
				showtab:false,
				styles: {
					backgroundColor: '#f1f1f1',
					borderRadius: '45rpx',
					width: '400rpx'
				},
				
			
			}
		},
		async onShow() {
			
		    if (this.ready) {
		        this.check();
		    }
		
		},
		onReady() {
			
		    this.ready = true;
		    this.check();
		},
		methods: {
			
			
			
			async check() {
				let checked = await helper.checkUser();
				if (checked) {
					checked = await helper.checkAuthorized();
					if (!checked) {
						this.showLogin = true;
					} else {
						this.checkEmpower();
					}
				} else {
					this.showZhuce = true;
				}
			},
			checkEmpower() {
				if (!helper.isEmpower()) {
					this.showEmpower = true;
				}
			},
			okZhuce() {
				this.search()
			    this.checkEmpower();
			    this.showZhuce = false;
			},
			okLogin() {
			    this.checkEmpower();
			    this.showLogin = false;
				this.search()
			},
			questEmpower() {
				helper.questEmpower();
			},
	
			
		}
	}
</script>

<style lang="scss">
	$nav-height: 60rpx;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #252F62;
		.head {
			position: absolute;
			top: 0;
			width: 750rpx;
			height: 408rpx;
			background: #252F62;

			.segment {
				position: absolute;
				top: 210rpx;
				width: 100%;
				height: 88rpx;

				border-radius: 24rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.active {
					color: #fff;
					font-weight: 600;
					font-family: PingFang SC, PingFang SC-Semibold;
					font-weight: Semibold;
					text-align: center;
					border-bottom: 4rpx solid #FFFFFF;
				}

				.divide {
					width: 1rpx;
					height: 86rpx;
					border-right: 2rpx solid #E2E2E2;
				}

				.left,
				.right {
					width: 234rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.top {
						font-size: 40rpx;
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: Semibold;
						text-align: center;
						color: #fff;
						line-height: 56rpx;
					}
				}
			}

		}

		.nav {
			display: flex;
			justify-content: center;
			align-items: center;

			.input-view {
				height: $nav-height;
				width: 326rpx;
				//margin-left: 32rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 2rpx solid #E2E2E2;
				line-height: $nav-height;


			}

			image {
				margin-left: 16rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.right {
				margin-left: 48rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

		}

		.nav-bar-input {
			width: 100%;
			height: 100%;
			padding-left: 24rpx;
		}
		
		.body {
			position: absolute;
			top: 299rpx;
			width: 750rpx;
			height: calc(100vh - 300rpx);
			background-color: #F8F8F8;
			.icon {
				height: 40rpx;
				width: 40rpx;
			}

			.b_1 {
				width: 750rpx;
				background: #ECEBFB;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				padding: 32rpx 24rpx 50rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: -20rpx;

				.tag {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #6052FF;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					margin: 0 0 24rpx 48rpx;

				}

				.item {
					width: 702rpx;
					height: 140rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					.left {
						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #383838;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-bottom: 8rpx;
						}

						.time {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #383838;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}
					}

					.right {
						.status {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							text-align: center;
							color: #FF2900;
							line-height: 34rpx;
							font-style: normal;
							margin-bottom: 8rpx;
						}

						.btn {
							width: 180rpx;
							height: 60rpx;
							background: #6052FF;
							border-radius: 34rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}
			}

			.b_2 {
				width: 750rpx;
				background: #F8F8F8;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.item {
					width: 702rpx;
					height: 404rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 8rpx 2rpx #E2E2E2;
					border-radius: 24rpx;
					padding: 32rpx 24rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					.hd {
						display: flex;
						align-items: center;

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #383838;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-right: 16rpx;
						}

						.type {
							width: 172rpx;
							height: 40rpx;
							background: #3CFF41;
							text-align: center;
						}
					}

					.time {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #383838;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						margin-top: 10rpx;
					}

					.des {
						display: flex;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #383838;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						margin-top: 24rpx;

						text {
							margin-right: 56rpx;
						}

						image {
							margin-right: 16rpx;
						}

					}

					.progress {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						text: {
							margin-right: 24rpx;
						}
					}

					.divide {
						margin-top: 24rpx;
						width: 654rpx;
						height: 2rpx;
						border: 2rpx solid #F8F8F8;
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30rpx;

						.detail {
							width: 176rpx;
							height: 60rpx;
							border-radius: 30rpx;
							border: 2rpx solid #252F62;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #252F62;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}

						.report {
							width: 176rpx;
							height: 60rpx;
							background: #252F62;
							border-radius: 30rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #fff;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}
					}
				}
			}
		}
	.body_no{
		top: 177rpx!important;
		height: calc(100vh - 177rpx)!important;
	}
	}
</style>